<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="multipart/form-data;charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <link rel="stylesheet" th:href="@{../bootstrap/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{../css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{../css/main.css}">

    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function(){
            $("#flip").click(function(){
                $("#rname2").val("");
                $("#panel").slideDown(50);
            });
            $("#stop").click(function(){
                $("#rname2").val("");
                $("#panel").slideUp(50);
            });
        });
    </script>

    <style type="text/css">
        #panel,#flip
        {
            padding:5px;
            width: 303px;
            /*text-align:center;*/
            background-color:#e5eecc;
            border:solid 1px #c3c3c3;
        }
        #panel
        {
            padding:50px;
            display:none;
        }
    </style>


    <style>
        .tree li {
            list-style-type: none;
            cursor:pointer;
        }
        table tbody tr:nth-child(odd){background:#F4F4F4;}
        table tbody td:nth-child(even){color:#C00;}
        select,option{
            font-size: 20px;
        }
        .myModal-input{
            width: 200px;
            line-height: 30px;
            display: inline;
        }
        .modal-header{
            background-color: #6495ED;
        }
        .modal-dialog{
            width:900px;
        }
        .close{
            background-color: red;
        }
        .img{
            width:120px;
            height: 120px;
        }
        .imgDiv{
            position: absolute;
            left: 560px;

        }
        label{
            display: inline-block;
            min-width: 70px;/*或者 width: 100px;*/
        }
    </style>
</head>

<body>

<div th:replace="../templates/nav"></div>
<div class="container-fluid">
    <div class="row">
        <div th:replace="../templates/menu"></div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title"><i class="glyphicon glyphicon-th"></i> 权限管理</h3>
                </div>
                <div class="panel-body">

                    <input type="hidden" name="rid" id="rid6">
                    <select id="option6" class="form-control" name="rid" style="float:left;width: 250px"></select>
<!--                    <button type="button" class="btn btn-primary" style="float:left;" data-toggle="modal" data-target="#myModal5" onclick="addRole()"><i class="glyphicon glyphicon-plus"></i>新增</button>-->
                    <button type="button" class="btn btn-primary" style="float:left;"  onclick="serch()"><i class="glyphicon "></i>搜索</button>
<!--                    <button onclick="serch()" style="margin-left: -100px" >搜索</button>-->


                    <br>

                    <div id="flip" >新增</div>
                    <div id="panel">
                        角色名：<input id="rname2">
                        <button id="stop2" style="text-align: left;"  onclick="addRole()">确认</button>
                        <button id="stop" style="text-align: right;" >取消</button></div>

                  <div style="margin-left: 18%">
                    <div class="form-group" style="width: 220px;float:left;height: 250px;margin-top: 50px" >
                        <label>未分配权限列表</label><br>
                        <select class="form-control"  size="10" style="width:130px;float:left;overflow-y:auto;height: 160px" id="unassignPermission2">
                        </select>
                    </div>

                    <div class="form-group" style="width: 180px;float: left;margin-top: 80px">
                        <ul>
                            <li class="btn btn-default glyphicon glyphicon-chevron-right" id="left2Right2"></li>
                            <br>
                            <li class="btn btn-default glyphicon glyphicon-chevron-left" style="margin-top:20px;" id="right2Left2"></li>
                        </ul>
                    </div>

                    <div class="form-group" style="width: 220px;height: 250px;float:left;margin-top: 50px">
                        <label >已分配权限列表</label><br>
                        <select class="form-control"  size="10" style="width:130px;overflow-y:auto;height: 160px" id="assignPermission2">
                        </select>
                    </div>
                  </div>
                    <br/>  <br/>
                    <button type="button" onclick="retun()" style="float: right;margin-right: 15px;margin-top: 230px">关闭</button>

                    <div class="modal fade myModel" id="myModal6" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                    <h4 class="modal-title" id="myModalLabel6">修改用户权限</h4>
                                </div>

                                <div class="modal-body">
                                    <form role="form" class="form-inline" id="permisssionForm">

                                    </form>
                                    <br> <br> <br> <br> <br> <br> <br> <br> <br><br> <br>

                                </div>

                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>

                                    <button type="button" class="btn btn-primary" onclick="closs()">完成修改 </button>
                                </div>
                            </div><!-- /.modal-content -->
                        </div><!-- /.modal-dialog -->
                    </div>


                </div>
            </div>
        </div>
    </div>
</div>



<script th:src="@{../jquery/jquery-2.1.1.min.js}"></script>
<script th:src="@{../bootstrap/js/bootstrap.min.js}"></script>
<script th:src="@{../script/docs.min.js}"></script>
<script th:src="@{../jquery/jquery.min.js}"></script>
<script th:src="@{../jquery/qrcode.min.js}"></script>
<script th:src="@{../layer/layer.js}"></script>
<script type="text/javascript">
    //页面初始函数
    $(function () {
        $(".list-group-item").click(function(){
            if ( $(this).find("ul") ) {
                $(this).toggleClass("tree-closed");
                if ( $(this).hasClass("tree-closed") ) {
                    $("ul", this).hide("fast");
                } else {
                    $("ul", this).show("fast");
                }
            }
        });
        changepermission(-1);

    });

    //角色huitian
    function changepermission(rid) {
        url = "/permission/permissionDo"
        $.get(url,"",function (data){
            if(data.result){
                //所有权限回填
                var htmldata1 = "<option  value='-1' >所有角色</option>";
                $.each(data.roleList,function(index,role){
                    htmldata1 = htmldata1 + "<option value="+role.rid+" >"+role.rname+"</option>";
                })
                $("#option6").html(htmldata1);
            }
        })
        permissionDo(rid)
    }
    //权限回填
    function permissionDo(rid){
        url = "/permission/showperDo"
        $.get(url,"rid="+rid,function (data){
            if(data.result){
                $("#rid6").val(data.rid);
                if (data.unassignperissionList != null) {
                    var htmldata1 = "";
                    $.each(data.unassignperissionList, function (index, permission) {
                        htmldata1 = htmldata1 + "<option value=" + permission.pid + " >" + permission.pname + "</option>";
                    });
                    $("#assignPermission2").html(htmldata1);
                }
                if (data.assignpermissionList != null) {
                    var htmldata2 = "";
                    $.each(data.assignpermissionList, function (index, permission) {
                        htmldata2 = htmldata2 + "<option value=" + permission.pid + " >" + permission.pname + "</option>";
                    });
                    $("#unassignPermission2").html(htmldata2);
                }
            }
        })
    }
    //按照角色搜素
    function serch(){
        var rid = $("#option6").val();
        //先清空原有数据
        $("#unassignPermission2").html("");
        $("#assignPermission2").html("");
        permissionDo(rid)
    }

    //增加角色(持久化//默认角色有首页的权限)
    function addRole(){
        var rname = $("#rname2").val()
        if(rname == null || rname == ""){
            layer.msg("角色名不能为空", {time: 1000, icon: 4, shift: 6}, function () {
            });
            return
        }
        url = "/role/addRoleDo"
        $.get(url,"rname="+rname,function (data){
            if(data.result){
                layer.msg("增加成功", {time: 1000, icon: 6, shift: 6}, function () {
                });
                //关闭弹框
                $("#stop").click();
                //角色刷新
                changepermission(-1);
            }else {
                layer.msg("角色已存在", {time: 1000, icon: 4, shift: 6}, function () {
                });
            }
        })
    }

    //角色增加权限
    $("#left2Right2").click(function (){
        var rid = $("#rid6").val();
        var pid = $("#unassignPermission2").val()
        url = "/savepermissionDo"
        $.get(url,"rid="+rid+"&pid="+pid,function (data){
            if(data.result){

                permissionDo(data.rid);
            }
        })
    });

    //角色删除权限
    $("#right2Left2").click(function (){
        var rid = $("#rid6").val();
        var pid = $("#assignPermission2").val()
        url = "/delectpermissionDo"
        $.get(url,"rid="+rid+"&pid="+pid,function (data){
            if(data.result){
                permissionDo(data.rid);
            }else{
                layer.msg("不能删除首页", {time: 1000, icon: 4, shift: 6}, function () {
                });
            }
        })
    });

    //返回到权限管理页面
    function retun(){
        window.location.href="/role/role"
    }

</script>
</body>
</html>







